<template>
    <!-- 采购申请列表 -->
    <div style="background-color: #f0f2f5; padding: 20px">
        <el-button type="primary" @click="router.push('/AddProcureApply')">新增</el-button>
        <el-button type="success" @click="UpdProcureApply()">修改</el-button>
        <el-button type="danger" @click="DelProcureApply()">删除</el-button>
        <el-button @click="role()">刷新</el-button>
    </div>
    <br/>
    <el-form :inline="true" :model="formInlines" class="demo-form-inline">

        <el-form-item label="预购主题：">
            <el-input v-model="formInlines.PAApplyMotif" clearable />
        </el-form-item>

        <el-form-item label="预购编号：">
            <el-input v-model="formInlines.PANumber" clearable />
        </el-form-item>

        <el-form-item label="预购日期：">
            <el-date-picker
                v-model="formInlines.Kdate"
                type="date"
                placeholder="请选择开始日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
            -
            <el-date-picker
                v-model="formInlines.Sdate"
                type="date"
                placeholder="请选择结束日期"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>

        <el-form-item label="预购分类：">
            <el-select style="width: 200px;" v-model="formInlines.PAApplicationType" clearable placeholder="请选择采购申请类别">
                <el-option label="原材料采购" value="原材料采购" />
                <el-option label="成品采购" value="成品采购" />
                <el-option label="设备采购" value="设备采购" />
            </el-select>
        </el-form-item>

        <el-form-item label="预购金额：">
            <el-input v-model="formInlines.SumPrice" clearable />
        </el-form-item>

        <el-form-item label="询价状态：">
            <el-input v-model="formInlines.PAEnquiryState" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="GetProcureApplys()">查询</el-button>
        </el-form-item>


    </el-form>

    <el-table :data="tabaDate" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="paNumber" label="采购申请编号" width="250" />
        <el-table-column prop="paApplyMotif" label="采购申请主题" width="120" />
        <el-table-column prop="paApplicationType" label="采购申请类别" width="120" />
        <el-table-column prop="sumPrice" label="总金额" width="100" />
        <el-table-column prop="paEnquiryState" label="询价状态" width="100" >
            <template v-slot="scope">
                {{ scope.row.paEnquiryState == 1 ? '已询价' : '未询价' }}
            </template>
        </el-table-column>
        <el-table-column prop="paPurchaseState" label="采购状态" width="100" >
            <template v-slot="scope">
                {{ scope.row.paPurchaseState == 1 ? '已采购' : '未采购' }}
            </template>
        </el-table-column>
        <el-table-column prop="dates" label="制单日期" width="100" >
            <template v-slot="scope">
                {{ scope.row.dates.replace("T"," ").substring(0, 10)}}
            </template>
        </el-table-column>
        <el-table-column prop="addName" label="制单人员" width="100" />
        <el-table-column prop="address" />
    </el-table>

            <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                            :total="formInline.sumCount">
                            ，当前是{{ formInline.PageIndex }}/{{ formInline.pageLast }}页，每页{{ formInline.PageSize }}条
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                            :total="formInline.sumCount">
                            <el-button :disabled="formInline.PageIndex == 1" @click="formInline.PageIndex = 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                            :total="formInline.sumCount">
                            <el-button :disabled="formInline.PageIndex == formInline.pageLast"
                                @click="formInline.PageIndex = formInline.pageLast">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>

</template>
    
<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed ,watch} from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'

const formInline = reactive({
    
    PageIndex: 1,
    PageSize: 5,
    pageLast: 0,
    sumCount:0
})
const formInlines = reactive({
    PAApplyMotif: '',
    PANumber: '',
    Kdate: '',
    Sdate: '',
    PAApplicationType: '',
    SumPrice: '',
    PAEnquiryState: '',
})

//分页
watch(formInline,() => {
    GetProcureApplys();
})

onMounted(() => {
    GetProcureApplys();//获取采购申请列表
})

const tabaDate=ref([])
const GetProcureApplys = () => {
    axios.get(http.zblnb+'/cg/api/ProcureApply/GetProcureApply', {
        params: {
            PAApplyMotif: formInlines.PAApplyMotif,
            PANumber: formInlines.PANumber,
            Kdate: formInlines.Kdate,
            Sdate: formInlines.Sdate,
            PAApplicationType: formInlines.PAApplicationType,
            SumPrice: formInlines.SumPrice,
            PAEnquiryState: formInlines.PAEnquiryState,
            PageIndex: formInline.PageIndex,
            PageSize:formInline.PageSize
        }
    })
    .then(res => {
        tabaDate.value = res.data.data.list
        // console.log(tabaDate.value)
        formInline.pageLast = res.data.data.pageLast
        formInline.sumCount=res.data.data.sumCount
    })
    .catch(err => {
        console.log(err)    
    })
}
//多选框赋值
const Duo=ref([])
const handleSelectionChange = (val: any) => {
    //   multipleSelection.value = val
    Duo.value = val;
    let id=Duo.value.map(item=>item.procureApplyId)
    // console.log(id)
}

//删除
const DelProcureApply = () => {
    if (Duo.value.length == 0) {
        ElMessage.error('请选择要删除的采购申请');
        return
    }
    ElMessageBox.confirm(
    '你真的要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        let ids = Duo.value.map(item => item.procureApplyId)
        let model = {
            id: ids,
            delName:'张三'
        }
        axios.post(http.zblnb+'/cg/api/ProcureApply/DelProcureApply',model)
        .then(res => {
            if (res.data.data > 0) {
                ElMessage.success('删除成功')
                GetProcureApplys();
            }    
            else {
                ElMessage.error('删除失败');
                return
            }

        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

//修改
const UpdProcureApply = () => {
     if (Duo.value.length == 0) {
        ElMessage.error('请选择要修改的采购信息');
        return
    }
    if (Duo.value.length >2) {
        ElMessage.error('只能选择一项要修改的采购信息');
        return
    }
    // console.log(Duo.value[0])
    router.push({
            path: '/UpdProcureApply',
            query: {
                id: Duo.value[0].procureApplyId
            }
        })
}

//刷新
const role = () => {
    setTimeout(() => {
        location.reload();
    },700)
}

</script>
    
<style>
    
</style>